<template>
	<view class="content">
		
		
		
	<view class="prop"  v-if="order.order.add_a">
				<view class="address">
			<image src="/static/address.png" mode=""></image>
			<view class="text">
				<view class="">
					<text>{{order.order.add_name}} </text><text>{{order.order.add_tel}}</text>
				</view>
				<view class="">
					{{order.order.add_a+order.order.add_b+order.order.add_s}}
				</view>
			</view>
			<!-- <u-icon name="edit-pen-fill" size="34"></u-icon> -->
		</view>
	<view class="title_" style="margin:20upx 30upx;" >
		<view class="border_"></view>
		<view class="" style="flex: 1;">
			道具物流
		</view>
	
		<!-- 		<view class="" style="float: right;color: #999999;">
			更多>
		</view> -->
	</view>

		<u-steps :current="current" dot activeColor="#FFCB71">
				<u-steps-item title="已下单">
				</u-steps-item>
				<u-steps-item title="已发货" ></u-steps-item>
				<u-steps-item title="运输中"></u-steps-item>
			</u-steps>
			<view class="" style="font-size: 26rpx;padding: 10rpx 30rpx;display: flex;align-items: center;" v-if="order_number">
				物流号：{{order_number}} <text style="width: 2px;height: 20rpx;background: #ccc;margin:0 10px;"></text> <text  @click="setClipboardData">复制</text>
			</view>
	</view>
		





		<view class="statistics">

			<view class="" v-for="(items ,indexs) in order.activ_list"  @click.stop="navDetails(items)"
				:style="{marginBottom: '30upx',filter:(items.activ_day*1000-date)<0?'grayscale(70%)':'grayscale(0%)'}">


				<view class="" style="display: flex;margin-bottom: 20upx;">
					<view class="image" style="position: relative;">
						<!-- <view class="wrap"><span class="silk-ribbon6">丝带效果6</span></view> -->
						<image :src="items.pic" mode=""></image>
					</view>

					<view class="goods_text">
						<view class="title">
							{{items.title}} <text v-if="items.activ_da">{{items.activ_day*1000-date}}</text>
						</view>
						<view class="type">
							<!-- <text>超级过山车教程</text> -->
						</view>
						<view class="num">
							<text v-if="item.order.status==1">￥{{item.member_zt==2?items.price_s:items.price_a}}</text>
							<text v-else>￥{{items.activ_price}}</text>
							<text class="statistics_num"> <text>X</text>{{items.num}}</text>
						</view>
					</view>
				</view>
				<view class="prop_list" v-if="items.props_list.num">
					<u-icon name="arrow-right"></u-icon>
					<view class="">
						<text>￥{{items.props_list.price}}</text> <text class="statistics_num">
							<text>X</text>{{items.props_list.num}}</text>
					</view>
					<view style="">道具购买 | {{items.props_list.title}}</view>
				</view>
				<view class="prop_list" v-if="items.rent_list.num">
					<u-icon name="arrow-right"></u-icon>
					<view class="">
						<text>￥{{items.rent_list.price_s}}/天</text>(押金：{{items.rent_list.price}}) <text
							class="statistics_num"> <text>X</text>{{items.rent_list.num}}</text>
					</view>
					<view style="">道具租赁 | {{items.rent_list.title}}</view>
				</view>
			</view>

			<view class="prop_list" v-for="(itemx ,Xindex) in order.props_list" :key="Xindex">
				<u-icon name="arrow-right"></u-icon>
				<view class="">
					<text>￥{{itemx.price_s}}/天</text>(押金：{{itemx.price}}) <text class="statistics_num">
						<text>X</text>{{itemx.num}}</text>
				</view>
				<view style="">综合道具 | {{itemx.title}}</view>
			</view> 
			<view class="statistics_item" style="margin-top: 20rpx;">
				<text>原价：</text>
				<text>￥{{order.order.price_s}}</text>
			</view>
			<view class="statistics_item">
				<text>会员优惠：</text>
				<text>￥{{order.order.member_price}}</text>
			</view>
			<view class="statistics_item">
				<text>运费</text>
				<text>包邮</text>
			</view>
			<view class="statistics_item" @click="discount">
				<text>优惠券</text>
				<text>{{order.order.coupons_price||'无'}}</text>
			</view>
			<view class="statistics_item">
				<text>实付款：</text>
				<text>￥{{order.order.price_pay}}</text>
			</view>
			<!-- 

		<view class="money_">
						原价：<text>￥{{order.order.price_s}}</text>
					</view>
					<view class="money_">
						优惠券：<text>￥{{order.order.coupons_price}}</text>
					</view>
					<view class="money_">
						会员优惠：<text>￥{{order.order.member_price}}</text>
					</view>
					<view class="money">
						实付款：<text>￥{{order.order.price_pay}}</text>
					</view> -->

			<!-- 			<view class="statistics_item">
				<text>合计</text>
				<text v-if="order.order.price_room">{{order.price_room}}</text>
				<text :style="{textDecoration:order.price_room?'line-through':''}">￥{{goodsMoney}}</text>
			</view> -->
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				order: {},
				current:0,
				order_number:''
			}
		},

		onLoad(e) {
			this.userData = uni.getStorageSync("userData")
			let data = JSON.parse(e.data)
      this.current=data.order.order_number?3:0
      this.order_number=data.order.order_number
			this.order = data

		},
		methods:{
			navDetails(item){
				uni.navigateTo({
					url: `/pages/goodsDetails/goodsDetails?id=${item.id}`
				})
			},
			setClipboardData(){
				uni.setClipboardData({
					data:this.order_number,
					showToast:false,
					success: function () {
						console.log('success');
							uni.showToast({
									title: '物流号已复制!',
									duration: 2000,
									icon: 'none'
								});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.prop{
		background-color: #ffffff;
		padding: 20upx 0;
	}
	.content {
		background-color: #FAFAFA;
		min-height: calc(100vh - 160upx);
		padding-bottom: 160upx;
	}

	.address {
		display: flex;
		background-color: #FFFFFF;
		padding: 30upx 50upx;
		align-items: center;
		font-size: 32upx;
		font-weight: 700;
		color: #333333;

		image {
			width: 60upx;
			height: 60upx;
			margin: auto 0;
			margin-right: 20upx;
		}

		.text {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 28upx;
			font-weight: 700;

			view:nth-child(1) {
				color: #999999;

				text:nth-child(1) {
					color: #333333;
					margin-right: 10upx;
				}
			}

			view:nth-child(2) {
				flex: 1;
				margin-top: 20upx;
			}
		}
	}


	.image {
		width: 160upx;
		height: 160upx;

		margin-right: 30upx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 8upx;
		}
	}


	.goods_text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;

		.title {
			font-size: 28upx;
			color: #333333;
			font-weight: 700;
		}

		.type {
			text {
				background-color: #F6F6F6;
				color: #999999;
				padding: 10upx 20upx;
				font-size: 24rpx;
				border-radius: 25upx;
			}
		}

		.num {
			display: flex;
			justify-content: space-between;
			color: #333333;

			text:nth-child(2) {
				font-size: 24upx;
			}
		}
	}

	.remark {
		background-color: #FFFFFF;
		margin-top: 20upx;
		padding: 0upx 40upx;

		.buyVip {
			display: flex;
			align-items: center;
			padding: 20upx 0;
			padding-bottom: 0;

			.text {
				flex: 1;
				font-size: 28upx;
				color: #333333;
				font-weight: 700;

				view:nth-child(2) {
					font-size: 24upx;
					font-weight: 100;
				}
			}

			image {
				width: 40upx;
				height: 40upx;
			}
		}

		.remark {
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			color: #333333;
			font-weight: 700;

			text:nth-child(2) {
				font-weight: 100;
				color: #999999;
			}
		}
	}

	.statistics_num {
		margin-left: 20upx;

		text {
			font-size: 20upx;
		}
	}

	.prop_list {
		// padding-left: 160upx;
		font-size: 24upx;
		color: #333333;
		display: flex;
		flex-direction: row-reverse;
		margin-top: 20upx;

		>view {
			// flex: 1;
			margin: 0 20upx;

			word-wrap: break-word;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			.statistics_num {
				margin-left: 20upx;

				text {
					font-size: 20upx;
				}
			}
		}

		>view:nth-child(2) {
			display: flex;
			justify-content: space-between;
			margin-left: 10upx;
		}
	}

	.statistics {
		background-color: #FFFFFF;
		margin-top: 20upx;
		font-size: 28upx;
		font-weight: 700;
		color: #333333;
		padding: 20upx 40upx;

		.statistics_item {
			display: flex;
			margin: 10upx 0;
			justify-content: space-between;
		}
	}
</style>
